<template>
    <div class="app-container">
   
   
     <!--查询表单-->
   <div class="search-div">
         <el-form label-width="70px" size="small">
           <el-row>
            <!-- 条件查询 -->
             <el-col :span="8">
               <el-form-item label="关键字">
                 <el-input style="width: 100%" v-model="searchObj.keyword" placeholder="手机/姓名/身份证"></el-input>
               </el-form-item>
            </el-col>
            <!-- 入住时间查询 -->
               <el-col :span="8" >
                <el-form-item label="入住起始时间" label-width="100px">
                <el-date-picker
                v-model="liveTime"
                type="date"
                placeholder="选择日期"
                style="width: 100%">
                </el-date-picker>
               </el-form-item>
             </el-col>
            <!-- 业主类别选择 -->
             <el-col :span="8" >
                <el-form-item label="选择业主类别" label-width="100px">
                    <template>
                <el-select v-model="searchObj.type" placeholder="请选择">
                    <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id">
                    </el-option>
                </el-select>
                </template>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row style="display:flex">
             <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
             
           </el-row>
         </el-form>
       </div>
   
           <!-- 工具条 -->
   <div class="tools-div">
     <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
   </div>
   
       <!-- 表格 -->
       <el-table
         v-loading="listLoading"
         :data="list"
         stripe
         border

         style="width: 100%;margin-top: 10px;">
   
         <el-table-column
           label="序号"
           width="70"
           align="center">
           <template slot-scope="scope">
             {{ (page - 1) * limit + scope.$index + 1 }}
           </template>
         </el-table-column>
   
         <el-table-column prop="param.community_name" label="小区名称"/>
         <el-table-column prop="param.house_name" label="所属房产" />
         <el-table-column prop="name" label="姓名" />
         <el-table-column prop="sex" label="性别" >
            <template slot-scope="scope">
          <span v-if="scope.row.sex===0">男</span>
          <span v-if="scope.row.sex===1">女</span>
        </template>
            </el-table-column>
         <el-table-column prop="picture" label="头像" />
         <el-table-column prop="idcard" label="身份证号" />
         <el-table-column prop="telephone" label="手机号码" />
         <el-table-column prop="profession" label="职业" />
         <el-table-column prop="type" label="类别" >
            <template slot-scope="scope">
          <el-tag  v-if="scope.row.type===0">房主</el-tag>
          <el-tag type="danger" v-if="scope.row.type===1">租客</el-tag>
        </template>
         </el-table-column>
         <el-table-column prop="remark" label="备注" />
   
         <el-table-column prop="liveTime" label="入住时间" width="160"/>
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
           </template>
         </el-table-column>
       </el-table>
   
       <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
         <el-form ref="dataForm" :model="sysOwner" label-width="150px" size="small" style="padding-right: 40px;">
           
           <!-- 所属小区  选择 -->
           <el-form-item label="所属小区">
          <template>
          <el-select v-model="sysOwner.communityId" placeholder="请选择" filterable>
            <el-option
              v-for="item in communityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-form-item>
           <!-- 所属房产  选择 -->
           <el-form-item label="所属房产">
          <template>
          <el-select v-model="sysOwner.houseId" placeholder="请选择" filterable>
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-form-item>

           <el-form-item label="姓名">
             <el-input v-model="sysOwner.name"/>
           </el-form-item>
           <el-form-item label="身份证号">
             <el-input v-model="sysOwner.idcard"/>
           </el-form-item>
           <el-form-item label="手机">
             <el-input v-model="sysOwner.telephone"/>
           </el-form-item>
           <el-form-item label="职业">
             <el-input v-model="sysOwner.profession"/>
           </el-form-item>
           <!-- 类别选择 -- 单选框 -->
           <!-- 备注 -->
         </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
           <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
         </span>
   </el-dialog>
   
            <!-- 分页组件 -->
     <el-pagination
       :current-page="page"
       :total="total"
       :page-size="limit"
       style="padding: 30px 0; text-align: center;"
       layout="total, prev, pager, next, jumper"
       @current-change="fetchData"
     />
    </div>
   </template>
   
   <script>
   import api from '@/api/sysOwner/owner'
   import comApi from '@/api/sysCommunity/community'
   import houApi from '@/api/sysHouse/house'
   export default {
       data(){
           return {
   
            //搜索选择 --业主类别
            typeOptions:[
                {
                    id:0,
                    value:'房主'
                },
                {
                    id:1,
                    value:'租客'
                },
            ],
           listLoading:true,
           list:[],
           total:0,
           page:1,
           limit:3,
           searchObj:{},
           liveTime:'',
           sysOwner:{},
           dialogVisible : false,
            //小区列表
          communityList:[],
          //  房产列表
          houseList:[],
           }
       },
       created(){
           this.fetchData(1);
       },
       methods:{
           //得到数据
           fetchData(page=1){
            this.listLoading = true;
                this.searchObj.liveTime = this.liveTime

               this.page = page;
               api.getPageList(this.page,this.limit,this.searchObj).then(res=>{
                   console.log(res.data)
                   this.list = res.data.records;
                   this.total = res.data.total;
                   this.listLoading = false;
               })
           },
   
           //重置按钮
           resetData(){
            // 清空表单
            this.searchObj={};
            this.liveTime='';
            // 再次刷新列表数据
            this.fetchData();
         },
         //修改按钮
         edit(id){
           api.getOwnerById(id).then(res=>{
               // console.log(res)
               this.sysOwner = res.data
               //弹出弹框
              this.openDialog();
           })
         },
         //添加按钮
         add(){
           this.sysOwner = {};
           this.openDialog();
         },
         //开启弹框 查询选择框列表 
      openDialog(){
        this.fetchCommunityList()
        this.fetchHouseList()
        this.dialogVisible = true;
      },

      //查询所有小区 放入选择框
      fetchCommunityList(){
          comApi.finAllCommunity().then(res=>{
            this.communityList = res.data
          })
      },
      //查询所有房产 放入选择框
      fetchHouseList(){
          houApi.getPageList(1,100).then(res=>{
            // console.log(res)
            this.houseList = res.data.records
          })
      },
         removeDataById(id){
   console.log(id);
           this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             // 点击确定
             api.removeById(id).then(response=>{
                 // 1.给出提示
                 this.$message({
               type: 'success',
               message: '删除成功!'
             });
             this.listLoading = true;
                 //2. 再次刷新数据列表
                 this.fetchData()
             })
   
             
           })
         },
         //保存/修改
         saveOrUpdate(){
           if(this.sysOwner.id){
               //修改
               this.update();
           }else{
               this.addOwner();
           }
         },
   
         update(){
           api.updateOwnerById(this.sysOwner).then(res=>{
                // 1.给出提示
                this.$message({
               type: 'success',
               message: '修改成功!'
             });
             //刷新列表
             this.fetchData();
             //关闭弹框
             this.dialogVisible = false;
           })
         },
   
         addOwner(){
           api.addOwner(this.sysOwner).then(res=>{
                // 1.给出提示
                this.$message({
               type: 'success',
               message: '修改成功!'
             });
             //刷新列表
             this.fetchData();
             //关闭弹框
             this.dialogVisible = false;
           })
          
         },
   
       }
   
   }
   </script>
   
   <style>
   
   </style>